<script setup lang="ts">
import { computed, ref } from "vue";

type Prop = {
  title?: any;
  content?: any;
  code?: boolean;
  edit?: boolean;
};

type KVModel = {
  key: string;
  value: string;
};

const model = defineModel<KVModel>();

const props = defineProps<Prop>();
const emit = defineEmits(["contentChange", "titleChange", "delete", "change"]);

const pTitle = ref(props.title ?? model.value?.key);
const pContent = ref(props.content ?? model.value?.value);

const shouldDelete = () => {
  emit("delete", pTitle.value);
};

const updateTitle = () => {
  if (model.value) {
    model.value.key = pTitle.value;
  }
  emit("change", pTitle.value, pContent.value);
};

const updateContent = () => {
  if (model.value) {
    model.value.value = pContent.value;
  }
  emit("change", pTitle.value, pContent.value);
};
</script>

<template>
  <div class="line-tag">
    <div class="line-title">
      <el-input
        v-if="edit"
        v-model="pTitle"
        size="small"
        placeholder="key"
        @change="updateTitle"
      />
      <span v-else>{{ pTitle }}</span>
    </div>
    <div class="line-content">
      <pre v-if="code">
        {{ pContent }}
      </pre>
      <el-tooltip v-else :content="pContent">
        <el-input
          v-if="edit"
          v-model="pContent"
          size="small"
          placeholder="value"
          type="textarea"
          autosize
          @change="updateContent"
        />
        <el-text v-else truncated>{{ pContent }}</el-text>
      </el-tooltip>
    </div>
    <div v-if="edit" class="mr-1">
      <el-button icon="Delete" link @click="shouldDelete" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.line-tag {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--el-color-info-light-9);
  border: 1px solid var(--el-border-color);
  overflow: hidden;
  align-items: center;

  .line-title {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 5px;
    min-width: 50px;
    justify-content: center;
    font-size: 12px;
    background-color: var(--el-border-color);
  }

  .line-content {
    display: flex;
    align-items: center;
    padding: 5px;
    min-width: 50px;
    justify-content: center;
    font-size: 12px;
    color: #333333;
  }
}
</style>
